<template>
  <div class="rootBox">
    <div class="loginBox">
      <a-form :model="loginData" name="loginForm" ref="loginFormRef" v-bind="formLayout">
        <a-form-item label="用户名" name="username"
            :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model:value="loginData.username" />
        </a-form-item>
        <a-form-item
            label="密码"
            name="password"
            :rules="[{ required: true, message: '请输入密码' }]"
        >
          <a-input v-model:value="loginData.password" />
        </a-form-item>
        <a-form-item
          :wrapper-col="{ span: 12 }"
          label="验证码"
          name="verifyCode"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <a-input v-model:value="loginData.verifyCode" :maxlength="4"/>
          <img :src="state.verifyCodeImg" class="verifyCodeImg" @click="flushVerifyCode"/>
        </a-form-item>
      </a-form>
      <a-button type="primary" @click="loginIn">登录</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { reactive, ref } from "@vue/reactivity";
import { ILoginInfo } from '@/api/common/LoginApi';
import { loginApi } from '@/api/commonApi';
import { clone, setLocal } from '@/util/utils';
import { sha256 } from '@/util/sha256';
import router from '@/router';

export default defineComponent({
  name: 'index',
  components: {
  },
  setup() {
    const formLayout  = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }
    const loginFormRef = ref()
    const loginData:ILoginInfo = reactive({
      username: '',
      password: '',
      uniqueKey: '',
      verifyCode: '',
    })
    const state = reactive({
      verifyCodeImg: ''
    })

    const loginIn = () => {
      const obj = clone(loginData)
      obj.password = sha256(obj.password)
      loginFormRef.value.validateFields().then(async () => {
        const res = await loginApi.in(obj)
        if(res.success){
          setLocal('account', res.result)
          router.push({path:'/'})
          return
        }else{
          flushVerifyCode()
          loginData.verifyCode = ''
        }
      })
    }


    const flushVerifyCode = async () => {
      const res = await loginApi.verifyCode()
      if(res.success){
        state.verifyCodeImg = res.result.info
        loginData.uniqueKey = res.result.uniqueKey
      }
    }

    flushVerifyCode()



    return {
      formLayout,
      loginFormRef,
      loginData,
      state,
      flushVerifyCode,
      loginIn
    }
  }
});
</script>


<style lang="less" scoped>
.rootBox {
  height: 100vh;
  background: url("../../../static/background.png") no-repeat;
  background-size: 100% 100%;
  .loginBox {
    background-color: #fff;
    padding: 60px 100px;
    border-radius: 10px;
    position: absolute;
    width: 30%;
    top: 30%;
    left: 60%;
    .verifyCodeImg {
      position: absolute;
      margin-left: 20px;
      width: 122px;
      height: 32px;
    }
    .ant-btn {
      width: 100%; 
      height: 40px;
      margin : 20px;
      font-size: 18px;
    }
  }
}

</style>